'use client';

import Link from "next/link";
import React, { useState, useEffect } from "react";
import styles from "./page.module.css";
import ToggleThemeButton from "../button/ToggleThemeButton";
import LogoutButton from "../button/LogoutButton";
import { useSession } from "next-auth/react";
import { usePathname } from "next/navigation";

// 导航链接（区分公开链接和需登录的链接）
const links = {
    public: [
        { id: 1, title: "首页", url: "/" },
        { id: 2, title: "作品集", url: "/portfolio" },
        { id: 3, title: "博客", url: "/blog" },
        { id: 4, title: "联系", url: "/contact" },
        { id: 5, title: "关于", url: "/about" },
        { id: 6, title: "控制台", url: "/dashboard" },
    ],
    authenticated: [
        { id: 7, title: "个人资料", url: "/profile" }, // 仅登录用户可见
    ],
};

const Navbar = () => {
    const { status } = useSession(); // 获取登录状态
    const pathname = usePathname(); // 获取当前路径
    const [activeLink, setActiveLink] = useState("");

    useEffect(() => {
        // 设置当前激活的链接
        setActiveLink(pathname);
    }, [pathname]);

    return (
        <div className={styles.container}>
            {/* Logo */}
            <Link href="/" className={styles.logo}>
                fuckerfucker.org
            </Link>

            {/* 导航链接 */}
            <div className={styles.links}>
                <ToggleThemeButton />

                {/* 公开链接（所有用户可见） */}
                {links.public.map((link) => (
                    <div key={link.id} className={styles.linkContainer}>
                        <Link
                            href={link.url}
                            className={`${styles.link} ${activeLink === link.url ? styles.activeLink : ''}`}
                        >
                            {link.title}
                        </Link>
                        {/* 链接指示器 */}
                        {activeLink === link.url && (
                            <div className={styles.indicator} />
                        )}
                    </div>
                ))}

                {/* 需登录的链接（仅登录用户可见） */}
                {status === "authenticated" &&
                    links.authenticated.map((link) => (
                        <div key={link.id} className={styles.linkContainer}>
                            <Link
                                href={link.url}
                                className={`${styles.link} ${activeLink === link.url ? styles.activeLink : ''}`}
                            >
                                {link.title}
                            </Link>
                            {/* 链接指示器 */}
                            {activeLink === link.url && (
                                <div className={styles.indicator} />
                            )}
                        </div>
                    ))
                }
            </div>

            {/* 注销按钮（仅登录用户可见） */}
            {status === "authenticated" && (
                <LogoutButton text="注销" url="/logout" />
            )}
        </div>
    );
};

export default Navbar;